.center {
    text-align: center;
}

.right {
    text-align: right;
}

.left {
    text-align: left;
}

.flex {
    display: flex;
}

.flex-column {
    flex-direction: column;
}

.flex-grow-1 {
    flex-grow: 1;
}

.flex-shrink-0 {
    flex-shrink: 0;
}

.flex-align-center {
    align-content: center;
    align-items: center;
}

.flex-center {
    justify-content: center;
}

.flex-v-center {
    align-items: center;
}

.flex-end {
    justify-content: flex-end;
}

.flex-between {
    justify-content: space-between;
}


.position-re {
    position: relative;
}

.fz-12 {
    font-size: 12px;
}

.fz-14 {
    font-size: 14px;
}

.fz-15 {
    font-size: 15px;
}

.fz-16 {
    font-size: 16px;
}

.w100 {
    width: 100%;
}

.w50 {
    width: 50%;
}

.h100 {
    height: 100%;
}



/*
-webkit-filter 支持的效果有：
翻页 动画leftDoor
出来弹一下特效fadeInNew
出现放大弹一弹christmasTree
头像旋转出现poster
披衣，飘的动效flutter
招聘上下抖动的特效pager
超人飞入特效flyIn
白云飘过特效cloud
页1漂浮动效floating
敲木鱼动效knock
张嘴动效talk
顺指针旋转特效zooMing
旗子飘特效cloak
文字图啪的出现seal
相当于啪一下的效果bullet
人飘一下dropper
头像旋转出现 poster
烟向上移动，放大显示再放大消失smoke_yan
翻页 动画leftDoor

icon
rotateInBig
phonesb
mainWords
expandUp
mainWords
expandUp
下雪 animate-snow
问号的动效ima3_action01
向右侧滑动一定距离moveToRight1
上下跳动bounce
缩放enlarge
blur模糊
放大弹跳出现bounceIn
横向缩放弹跳rubberBand
左右滑动shake
向左直线运动并返回shake1
左右倾斜摇晃swing
放大并左右倾斜摇晃tada
左右晃动wobble
自上向下跳入bounceInDown
自上向下弹跳出现bounceInDown
从左侧滑入bounceInLeft
从右侧滑入bounceInRight
自下向上滑入bounceInUp
上下快速跳动bounceInUp1
上下跳动bounceInUp2
缩小放大后缩小至消失bounceOut
上下跳动后向下滑出bounceOutDown
向左侧滑出bounceOutLeft
向右侧滑出bounceOutRight
向上滑出bounceOutUp
淡入fadeIn
从左上角滑入fadeIn1
自右向左滑入1fadeFromLeft
自左向右滑入1fadeFromRight
自上向下滑入1fadeFromTop
自下向上滑入1fadeFromBottom
自上向下滑入2fadeInDown
自上向下滑入fadeInDownBig
从左侧淡入fadeInLeft
从左侧渐变滑入fadeInLeftBig
从左上角淡入fadeInTL
从右上角淡入fadeInTR
从左下角淡入fadeInBL
从右上角淡入fadeInBR
从右侧淡入fadeInRight
放大旋转后恢复flip1
以X轴旋转出现flipInX
从右侧倾斜淡入lightSpeedIn

向右侧倾斜淡出 lightSpeedOut
顺时针旋转出现rotateIn
以左下角为原点顺时针旋转45度淡入rotateInDownLeft
以右下角为原点逆时针旋转45度淡入rotateInDownRight
以左下角为原点向上逆时针旋转45度淡入rotateInUpLeft
以右下角为原点向上顺时针旋转45度淡入rotateInUpRight
悬挂后掉下去hinge
从左侧顺时针旋转淡入rollIn
从小到大淡入zoomIn

自上向下弹入zoomInDown
从左侧放大出现zoomInLeft
从右侧放大出现zoomInRight
倾斜扭动skewX
自下向上放大出现zoomInUp
由大到小淡入zoomOut
自上向下滑入slideInDown
向下滑动一定距离slideOutDown
向左侧滑动一定距离slideOutLeft
/*晃动*/
@-webkit-keyframes ans {
    0% {
        -webkit-transform: rotate(0deg)
    }
    25% {
        -webkit-transform: rotate(8deg)
    }
    50% {
        -webkit-transform: rotate(0deg)
    }
    75% {
        -webkit-transform: rotate(-8deg)
    }
    100% {
        -webkit-transform: rotate(0deg)
    }
}

/*白云飘过特效 小鸟*/
@-webkit-keyframes cloud{
    0% {
        -webkit-transform: translateX(200px);
    }
    100% {
        -webkit-transform: translateX(-300px);
    }
}

@-webkit-keyframes cloud1{
    0% {
        -webkit-transform: translateX(-200px);
    }
    100% {
        -webkit-transform: translateX(300px);
    }
}


/* 翻页 动画leftDoor*/
@-webkit-keyframes apao{
    0% { -webkit-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); }
    25% {  -webkit-transform: translate3d(0px,10px, 0);transform: translate3d(0px, 10px, 0); }
    50% { -webkit-transform: translate3d(0px,0px, 0);transform: translate3d(0px, 0px, 0); }
    75% {-webkit-transform: translate3d(0px,10px, 0);  transform: translate3d(0px, 10px, 0);}
    100% { -webkit-transform: translate3d(0px,0px, 0); transform: translate3d(0px,0px, 0) ;}
}

/*柳枝摆动*/
@-webkit-keyframes roate1 {
    from { -webkit-transform: none;}
    50% { -webkit-transform: rotate(5deg);}
    to { -webkit-transform: none;}
}

@-webkit-keyframes seal1 {
    0%   { opacity: 0; -webkit-transform: scale3d(1.2, 1.2, 1.2); transform: scale3d(1.2, 1.2, 1.2);}
    100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);}
}
@keyframes seal1 {
    0%   { opacity: 0; -webkit-transform: scale3d(1.2, 1.2, 1.2); transform: scale3d(1.2, 1.2, 1.2);}
    100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);}
}


@-webkit-keyframes pounda2 {
    from { -webkit-transform: none; opacity: 1}
    50% { -webkit-transform: scale(1.1); opacity: 0.5}
    to { -webkit-transform: none; opacity: 1}
}


@-webkit-keyframes leftDoor {
    0%{
        -webkit-transform:perspective(0) rotateY(0);
        -webkit-transform-origin: 0% 40%;
    }
    100% {
        -webkit-transform:perspective(1000px) rotateY(-90deg);
        -webkit-transform-origin: 0% 40%;
        opacity: 1;
    }
}

/*地铁左右门*/
@-webkit-keyframes leftDoor1 {
    0% {
        -webkit-transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(-100%);
    }
}

@-webkit-keyframes rightDoor {
    0% {
        -webkit-transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(100%);
    }
}
@-webkit-keyframes leftDoor2 {
    0% {
        -webkit-transform: translateX(-100%);
    }

    100% {
        -webkit-transform: translateX(0);
    }
}
@-webkit-keyframes rightDoor2 {
    0% {
        -webkit-transform: translateX(100%);
    }

    100% {
        -webkit-transform: translateX(0);
    }
}

/*出现放大弹一弹christmasTree*/
@-webkit-keyframes christmasTree {
    0% {
        opacity:0;
        -webkit-transform:scale(0,0) translate3d(0,0,0);
    }
    40% {
        opacity:1;
        -webkit-transform:scale(0.9,1.2) translate3d(0,0,0);
    }
    60% {
        opacity:1;
        -webkit-transform:scale(1.2,0.8) translate3d(0,0,0);
    }
    80% {
        opacity:1;
        -webkit-transform:scale(0.9,1.1) translate3d(0,0,0);
    }
    100% {
        opacity:1;
        -webkit-transform:scale(1,1) translate3d(0,0,0);
    }
}
/*相当于啪一下的效果bullet */
@-webkit-keyframes bullet{
    0%{opacity:0;
        -webkit-transform:scale(4)
    }
    5%{
        opacity:1;-webkit-transform:scale(4)
    }
    100%{
        opacity:1;-webkit-transform:scale(1)
    }
}
/*人飘一下dropper*/
@-webkit-keyframes dropper{
    0%{-webkit-transform:rotate(0)}
    50%{-webkit-transform:rotate(-10deg)}
    100%{-webkit-transform:rotate(0)}
}
/* 头像旋转出现 poster*/
@-webkit-keyframes poster{
    0%{-webkit-transform:scale(0) rotate(0)}
    100%{-webkit-transform:scale(1) rotate(720deg)}
}

/*云左右飘*/
@-webkit-keyframes get_yun {
    0% {
        -webkit-transform: translate(0px, 0%);
        opacity: 1;
    }
    45% {
        -webkit-transform: translate(40px, 0%);
        opacity: 1;
    }
    50% {
        -webkit-transform: translate(40px, 0%);
        opacity: 1;
    }
    100% {
        -webkit-transform: translate(0px, 0%);
        opacity: 1;
    }

}
/*烟向上移动，放大显示再放大消失smoke_yan*/
@-webkit-keyframes smoke_yan {
    0%,
    5% {
        -webkit-transform: translate(0%, 1%) scale(0.9);
        opacity: 0;
    }
    10% {
        -webkit-transform: translate(0%, 1%) scale(0.9);
        opacity: 1;
    }
    70% {
        -webkit-transform: translate(0%, 0%) scale(1);
        opacity: 1;
    }
    100% {
        -webkit-transform: translate(0%, 0%) scale(1.1);
        opacity: 0;
    }

}
/*文字图啪的出现seal*/
@-webkit-keyframes seal {
    0%   { opacity: 0; -webkit-transform: scale3d(2, 2, 2); transform: scale3d(2, 2, 2);}
    100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);}
}
/*披衣，飘的动效flutter*/
@-webkit-keyframes flutter {
    0% {
        opacity:0;
        -webkit-transform: skew(0deg,0deg);
    }
    50% {
        -webkit-transform: skew(-5deg,-20deg);
    }
    100% {
        opacity: 1;
        -webkit-transform: skew(0deg,0deg);
    }
}

/*超人飞入特效flyIn*/
@-webkit-keyframes flyIn{
    0% {
        -webkit-transform: translate(500px,-500px);
        opacity: 1;
    }
    100% {
        -webkit-transform: translate(0px,0px);
        opacity: 1;
    }
}
/*白云飘过特效cloud*/
@-webkit-keyframes cloud{
    0% {
        opacity:0;
        -webkit-transform: translateX(-60%);
    }
    10% {
        opacity:1;
    }
    100% {
        opacity:1;
        -webkit-transform: translateX(30%);
    }
}

/*页1漂浮动效floating*/
@-webkit-keyframes floating {
    0% {
        -webkit-transform: translateY(0%);
    }
    50% {
        -webkit-transform: translateY(4%);
    }
    100% {
        -webkit-transform: translateY(0%);
    }
}
/*敲木鱼动效knock*/
@-webkit-keyframes knock {
    0% {
        -webkit-transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(-60deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
    }
}
/*张嘴动效talk*/
@-webkit-keyframes talk {
    0% {
        -webkit-transform: scale(1,1)
    }
    50% {
        -webkit-transform: scale(0.8,0.2)
    }
    100% {
        -webkit-transform: scale(1,1)
    }
}
@-webkit-keyframes eruption {
    0% {
        opacity: 0;
        -webkit-transform: scale(1,1)
    }
    50% {
        -webkit-transform: scale(1.2,0.9)
    }
    100% {
        -webkit-transform: scale(1,1)
    }
}

@-webkit-keyframes rotateInBig {
    0% {
        -webkit-transform: rotate(90deg) scale(0.5);
        opacity: 0;
    }
    100% {
        -webkit-transform: rotate(0deg) scale(1);
        opacity: 1;
    }
}

/*出来弹一下特效fadeInNew*/
@-webkit-keyframes fadeInNew {
    0% {
        -webkit-transform: scale(0);
        opacity: 0.0;
    }
    60% {
        -webkit-transform: scale(1.05);
    }
    80% {
        -webkit-transform: scale(0.95);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1);
        opacity: 1;
    }
}
.fadeInNew {
    -webkit-animation-name: fadeInNew;
    animation-name: fadeInNew;
}
/*旗子飘特效cloak*/
@-webkit-keyframes cloak {
    0% {
        -webkit-transform: rotateX(0deg);
        z-index: 10;
    }
    20% {
        -webkit-transform:  rotateX(-30deg);
    }35% {
         -webkit-transform:  rotateX(-15deg);
     }40% {
          -webkit-transform:  rotateX(-10deg);
      }
    100% {
        -webkit-transform:  rotateX(0deg);
        z-index: 10;
    }
}
@-webkit-keyframes mainWords{
    0% {
        -webkit-transform: translateY(200%) scale(0.1);
        opacity: 1;
        z-index: 0;
    }
    50% {
        -webkit-transform:translateY(0px);
        opacity: 1;
        z-index: 500;
    }
    75% {
        -webkit-transform: translateY(0px);
        opacity: 1;
        z-index: 500;
    }
    100% {
        -webkit-transform: translateY(0) scale(1);
        opacity: 1;
        z-index: 500;
    }
}

@-webkit-keyframes expandUp {
    0% {
        -webkit-transform: translateY(100%) scale(0.6) scaleY(0.5);
        opacity: 0;
    }
    60%{
        -webkit-transform: translateY(-7%) scaleY(1.12);
    }
    75%{
        -webkit-transform: translateY(3%);
    }
    100% {
        -webkit-transform: translateY(0%) scale(1) scaleY(1);
        opacity: 1;
    }
}

/*
 * phone SB
 */
@-webkit-keyframes phonesb {
    0% {
        -webkit-transform:scale(1);
    }
    50% {
        -webkit-transform:scale(1.4);
    }
    100% {
        -webkit-transform:scale(1.8);
    }
}
/* 下雪 animate-snow */
@-webkit-keyframes animate-snow
{
    0% { background-position:0 0;}
    100% { background-position: center 885px;}
}


/*问号的动效ima3_action01*/
@keyframes ima3_action01
{
    0%   {
        opacity:0;
        transform-style: preserve-3d;
        backface-visibility: hidden;
        transform: rotateY(0deg);}
    30%   {transform-style: preserve-3d;
        backface-visibility: hidden;
        transform: rotateY(-180deg);}
    60%   {transform-style: preserve-3d;
        backface-visibility: hidden;
        transform: rotateY(0deg);}
    100%   {transform-style: preserve-3d;
        backface-visibility: hidden;
        transform: rotateY(0deg);}
}
/*加载页小图标摇晃特效*/

@-webkit-keyframes load_action
{
    0%   {-webkit-transform: rotate(0deg);}
    10%  {-webkit-transform: rotate(20deg);}
    20%  {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(0deg);}
}


/*晃动*/
@-webkit-keyframes icon{
    0%{
        -webkit-transform:rotate(0deg)}
    5%{opacity:1;
        -webkit-transform:rotate(10deg)}
    10%{-webkit-transform:rotate(-10deg)}
    15%{-webkit-transform:rotate(5deg)}
    20%{-webkit-transform:rotate(-5deg)}
    30%{-webkit-transform:rotate(0deg)}
    100%{-webkit-transform:rotate(0deg)}}

/*星星闪烁*/
@-webkit-keyframes star{
    0%{-webkit-filter: brightness(0.8);}
    100%{-webkit-filter: brightness(1.5);}
}


/*放大pulse*/
@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    50% {
        -webkit-transform: scale3d(1.02, 1.02, 1.02);
        transform: scale3d(1.02, 1.02, 1.02);
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
/*--------------向右侧倾斜滑动-------------------*/
@-webkit-keyframes lightSpeedInLeft {
    0% {
        -webkit-transform: translate3d(-100%, 0, 0) skewX(-8deg);
        transform: translate3d(-100%, 0, 0) skewX(-8deg);
        opacity: 0;
    }

    100% {
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}
@keyframes lightSpeedInLeft {
    0% {
        -webkit-transform: translate3d(-100%, 0, 0) skewX(-8deg);
        transform: translate3d(-100%, 0, 0) skewX(-8deg);
        opacity: 0;
    }

    100% {
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

/*--------------向左侧倾斜滑动-------------------*/
@-webkit-keyframes lightSpeedIn {
    0% {
        -webkit-transform: translate3d(100%, 0, 0) skewX(-5deg);
        transform: translate3d(100%, 0, 0) skewX(-5deg);
        opacity: 0;
    }

    60% {
        -webkit-transform: skewX(10deg);
        transform: skewX(10deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: skewX(10deg);
        transform: skewX(10deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}
@keyframes lightSpeedIn {
    0% {
        -webkit-transform: translate3d(100%, 0, 0) skewX(-5deg);
        transform: translate3d(100%, 0, 0) skewX(-5deg);
        opacity: 0;
    }

    60% {
        -webkit-transform: skewX(10deg);
        transform: skewX(10deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: skewX(10deg);
        transform: skewX(10deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}
/*--------------上下跳动bounce-------------------*/
@-webkit-keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    40%, 43% {
        -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0);
    }

    70% {
        -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0);
    }

    90% {
        -webkit-transform: translate3d(0,-4px,0);
        transform: translate3d(0,-4px,0);
    }
}
@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    40%, 43% {
        -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0);
    }

    70% {
        -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0);
    }

    90% {
        -webkit-transform: translate3d(0,-4px,0);
        transform: translate3d(0,-4px,0);
    }
}
/*--------------闪现-------------------*/
@-webkit-keyframes flash {
    0%, 50%, 100% {
        opacity: 1;
    }

    25%, 75% {
        opacity: 0;
    }
}
@keyframes flash {
    0%, 50%, 100% {
        opacity: 1;
    }

    25%, 75% {
        opacity: 0;
    }
}
/*--------------缩放enlarge------------------*/
@-webkit-keyframes enlarge {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    50% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@keyframes enlarge {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    50% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

/*--------------横向缩放弹跳rubberBand-------------------*/
@-webkit-keyframes rubberBand {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
    }

    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
    }

    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
    }

    65% {
        -webkit-transform: scale3d(.95, 1.05, 1);
        transform: scale3d(.95, 1.05, 1);
    }

    75% {
        -webkit-transform: scale3d(1.05, .95, 1);
        transform: scale3d(1.05, .95, 1);
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@keyframes rubberBand {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
    }

    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
    }

    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
    }

    65% {
        -webkit-transform: scale3d(.95, 1.05, 1);
        transform: scale3d(.95, 1.05, 1);
    }

    75% {
        -webkit-transform: scale3d(1.05, .95, 1);
        transform: scale3d(1.05, .95, 1);
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

/*--------------左右滑动shake-------------------*/
@-webkit-keyframes shake {
    0%{
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    40% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }

    80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
@keyframes shake {
    0%{
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    40% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }

    80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

/*--------------向左直线运动并返回shake1------------------*/
@-webkit-keyframes shake1 {
    0%{
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    40% {
        -webkit-transform: translate3d(-100px, 0, 0);
        transform: translate3d(-100px, 0, 0);
    }

    80% {
        -webkit-transform: translate3d(-200px, 0, 0);
        transform: translate3d(-200px, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
@keyframes shake1 {
    0%{
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    40% {
        -webkit-transform: translate3d(-100px, 0, 0);
        transform: translate3d(-100px, 0, 0);
    }

    80% {
        -webkit-transform: translate3d(-200px, 0, 0);
        transform: translate3d(-200px, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

/*--------------左右倾斜摇晃swing------------------*/
@-webkit-keyframes swing {
    20% {
        -webkit-transform: rotate3d(0, 0, 1, .5deg);
        transform: rotate3d(0, 0, 1, .5deg);
    }

    40% {
        -webkit-transform: rotate3d(0, 0, 1, -.5deg);
        transform: rotate3d(0, 0, 1, -.5deg);
    }

    60% {
        -webkit-transform: rotate3d(0, 0, 1, 5deg);
        transform: rotate3d(0, 0, 1, 5deg);
    }

    80% {
        -webkit-transform: rotate3d(0, 0, 1, -5deg);
        transform: rotate3d(0, 0, 1, -5deg);
    }

    100% {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
    }
}
@keyframes swing {
    20% {
        -webkit-transform: rotate3d(0, 0, 1, .5deg);
        transform: rotate3d(0, 0, 1, .5deg);
    }

    40% {
        -webkit-transform: rotate3d(0, 0, 1, -.5deg);
        transform: rotate3d(0, 0, 1, -.5deg);
    }

    60% {
        -webkit-transform: rotate3d(0, 0, 1, 5deg);
        transform: rotate3d(0, 0, 1, 5deg);
    }

    80% {
        -webkit-transform: rotate3d(0, 0, 1, -5deg);
        transform: rotate3d(0, 0, 1, -5deg);
    }

    100% {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
    }
}

/*--------------放大并左右倾斜摇晃tada------------------*/
@-webkit-keyframes tada {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    10%, 20% {
        -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    }

    30%, 50%, 70%, 90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }

    40%, 60%, 80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@keyframes tada {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    10%, 20% {
        -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    }

    30%, 50%, 70%, 90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }

    40%, 60%, 80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

/*--------------左右晃动wobble-------------------*/
@-webkit-keyframes wobble {
    0% {
        -webkit-transform: none;
        transform: none;
    }

    15% {
        -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    }

    30% {
        -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    }

    45% {
        -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    }

    60% {
        -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    }

    75% {
        -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    }

    100% {
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes wobble {
    0% {
        -webkit-transform: none;
        transform: none;
    }

    15% {
        -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    }

    30% {
        -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    }

    45% {
        -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    }

    60% {
        -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    }

    75% {
        -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    }

    100% {
        -webkit-transform: none;
        transform: none;
    }
}

/*-----------------自上向下跳入bounceInDown-----------*/
@-webkit-keyframes bounceInDown {
    0%, 60%, 75%, 90%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0);
    }

    60% {
        opacity: 0.8;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0);
    }

    75% {
        opacity: 1;
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }

    90% {
        opacity: 1;
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes bounceInDown {
    0%, 60%, 75%, 90%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0);
    }

    60% {
        opacity: 0.8;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0);
    }

    75% {
        opacity: 1;
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }

    90% {
        opacity: 1;
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}



/*--------------放大弹跳出现bounceIn-------------------*/
@-webkit-keyframes bounceIn {
    0%, 20%, 40%, 60%, 80%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }

    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        -webkit-transform: scale3d(.97, .97, .97);
        transform: scale3d(.97, .97, .97);
    }

    100% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@keyframes bounceIn {
    0%, 20%, 40%, 60%, 80%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }

    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        -webkit-transform: scale3d(.97, .97, .97);
        transform: scale3d(.97, .97, .97);
    }

    100% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}


/*--------------自上向下弹跳出现bounceInDown-------------------*/
@-webkit-keyframes bounceInDown {
    0%, 60%, 75%, 90%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0);
    }

    60% {
        opacity: 0.8;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0);
    }

    75% {
        opacity: 1;
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }

    90% {
        opacity: 1;
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

/*--------------从左侧滑入bounceInLeft-------------------*/
@-webkit-keyframes bounceInLeft {
    0%, 60%, 75%, 90%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(-200px, 0, 0);
        transform: translate3d(-200px, 0, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px, 0, 0);
        transform: translate3d(25px, 0, 0);
    }

    75% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }

    90% {
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0);
    }

    100% {
        -webkit-transform: none;
        transform: none;
    }
}

/*--------------从右侧滑入bounceInRight-------------------*/
@-webkit-keyframes bounceInRight {
    0%, 60%, 75%, 90%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(200px, 0, 0);
        transform: translate3d(200px, 0, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, 0, 0);
        transform: translate3d(-25px, 0, 0);
    }

    75% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }

    90% {
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0);
    }

    100% {
        -webkit-transform: none;
        transform: none;
    }
}

/*--------------自下向上滑入bounceInUp-------------------*/
@-webkit-keyframes bounceInUp {
    0%, 60%, 75%, 90%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 300px, 0);
        transform: translate3d(0, 300px, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }

    75% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0);
    }

    90% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0);
    }

    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

/*--------------上下快速跳动bounceInUp1-------------------*/
@-webkit-keyframes bounceInUp1 {
    0%,5%,10%,15%, 20%, 25%,30%,35%,40%,45%,50%,55%,60%,65%,70%,75%,80%,85%,90%,95%,100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 200px, 0);
        transform: translate3d(0, 200px, 0);
    }
    5% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }

    10% {
        opacity: 1;
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }
    15% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }


    20% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }
    25% {
        opacity: 1;
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0);
    }


    30% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }
    35% {
        opacity: 1;
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0);
    }

    40% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }
    45% {
        opacity: 1;
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0);
    }

    50% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }
    55% {
        opacity: 1;
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0);
    }

    60% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }
    65% {
        opacity: 1;
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }

    70% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0);
    }
    75% {
        opacity: 1;
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }

    80% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0);
    }
    85% {
        opacity: 1;
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }

    90% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0);
    }
    95% {
        opacity: 1;
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0);
    }

    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

/*--------------上下跳动bounceInUp2-------------------*/
@-webkit-keyframes bounceInUp2 {
    0%, 10%, 20%, 30%,40%,50%,60%,70%,80%,90%,100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 200px, 0);
        transform: translate3d(0, 200px, 0);
    }

    10% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }

    20% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }

    30% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0);
    }
    40% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }
    50% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0);
    }
    60% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }
    70% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0);
    }
    80% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }
    90% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0);
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

/*--------------向右侧滑动一定距离moveToRight1-------------------*/
@-webkit-keyframes moveToRight1 {
    0%,100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 1;
        -webkit-transform: translate3d(-85px,0,0);
        transform: translate3d(-85px,0,0);
    }
    100% {
        opacity: 1;
        -webkit-transform: translate3d(120px, 0, 0);
        transform: translate3d(120px, 0, 0);
    }
}

/*--------------缩小放大后缩小至消失bounceOut-------------------*/
@-webkit-keyframes bounceOut {
    20% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9);
    }

    50%, 55% {
        opacity: 1;
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }
}

/*--------------上下跳动后向下滑出bounceOutDown-------------------*/
@-webkit-keyframes bounceOutDown {
    20% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }

    40%, 45% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, 300px, 0);
        transform: translate3d(0, 300px, 0);
    }
}

/*--------------向左侧滑出bounceOutLeft-------------------*/
@-webkit-keyframes bounceOutLeft {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(20px, 0, 0);
        transform: translate3d(20px, 0, 0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(-200px, 0, 0);
        transform: translate3d(-200px, 0, 0);
    }
}

/*--------------向右侧滑出bounceOutRight-------------------*/
@-webkit-keyframes bounceOutRight {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(-20px, 0, 0);
        transform: translate3d(-20px, 0, 0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(200px, 0, 0);
        transform: translate3d(200px, 0, 0);
    }
}

/*--------------向上滑出bounceOutUp-------------------*/
@-webkit-keyframes bounceOutUp {
    20% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }

    40%, 45% {
        opacity: 1;
        -webkit-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, -200px, 0);
        transform: translate3d(0, -200px, 0);
    }
}

/*--------------淡入fadeIn-------------------*/
@-webkit-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}

/*--------------从左上角滑入fadeIn1-------------------*/
@-webkit-keyframes fadeIn1 {
    0% {opacity:1;-webkit-transform: translate3d(-300px, 0, 0) scale(0.4) }
    100% {opacity:1;-webkit-transform: translate3d(0px, 0px, 0) scale(1) }
}

@-webkit-keyframes waterMove {
    0% {
        background-position:0,0;
    }
    100% {
        background-position:4000%,0;
    }
}

/*--------------自右向左滑入1fadeFromLeft-------------------*/
@-webkit-keyframes fadeFromLeft{
    0%{-webkit-transform:translate3d(-100px,0,0);opacity: 0;}
    100%{-webkit-transform:translate3d(0,0,0);opacity: 1;}
}
/*--------------自左向右滑入1fadeFromRight-------------------*/
@-webkit-keyframes fadeFromRight{
    0%{-webkit-transform:translate3d(100px,0,0);opacity: 0;}
    100%{-webkit-transform:translate3d(0,0,0);opacity: 1;}
}
/*--------------自上向下滑入1fadeFromTop-------------------*/
@-webkit-keyframes fadeFromTop{
    0%{-webkit-transform:translate3d(0,-100px,0);opacity: 0;}
    100%{-webkit-transform:translate3d(0,0,0);opacity: 1;}
}
/*--------------自下向上滑入1fadeFromBottom-------------------*/
@-webkit-keyframes fadeFromBottom{
    0%{-webkit-transform:translate3d(0,100px,0);opacity: 0;}
    100%{-webkit-transform:translate3d(0,0,0);opacity: 1;}
}

/*--------------自上向下滑入2fadeInDown-------------------*/
@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}




/*--------------自上向下滑入fadeInDownBig-------------------*/
@-webkit-keyframes fadeInDownBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -200px, 0);
        transform: translate3d(0, -200px, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

/*--------------从左侧淡入fadeInLeft-------------------*/
@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-40px, 0, 0);
        transform: translate3d(-40px, 0, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

/*--------------从左侧渐变滑入fadeInLeftBig-------------------*/
@-webkit-keyframes fadeInLeftBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-200px, 0, 0);
        transform: translate3d(-200px, 0, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

/*--------------从左上角淡入fadeInTL-------------------*/
@-webkit-keyframes fadeInTL {
    0%{opacity:0;-webkit-transform:translate3d(-100%,-100%,0)}
    100%{opacity:1;-webkit-transform:none}
}

/*--------------从右上角淡入fadeInTR-------------------*/
@-webkit-keyframes fadeInTR {
    0%{opacity:0;transform:translate3d(100%,-100%,0)}
    100%{opacity:1;transform:none}
}

/*--------------从左下角淡入fadeInBL-------------------*/
@-webkit-keyframes fadeInBL {
    0%{opacity:0;-webkit-transform:translate3d(-20px,20px,0)}
    100%{opacity:1;-webkit-transform:none}
}

/*--------------从右上角淡入fadeInBR-------------------*/
@-webkit-keyframes fadeInBR {
    0%{opacity:0;-webkit-transform:translate3d(20px,-20px,0)}
    100%{opacity:1;-webkit-transform:none}
}

/*--------------从右侧淡入fadeInRight-------------------*/
@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(40px, 0, 0);
        transform: translate3d(40px, 0, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

/*--------------从右侧滑动淡入fadeInRightBig-------------------*/
@-webkit-keyframes fadeInRightBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(200px, 0, 0);
        transform: translate3d(200px, 0, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

/*--------------自下向上淡入-------------------*/
@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

/*--------------淡出-------------------*/
@-webkit-keyframes fadeOut {
    0% {opacity: 1;}
    100% {opacity: 0;}
}

/*--------------向下淡出-------------------*/
@-webkit-keyframes fadeOutDown {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
}

/*--------------向下滑动淡出-------------------*/
@-webkit-keyframes fadeOutDownBig {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, 200px, 0);
        transform: translate3d(0, 200px, 0);
    }
}

/*--------------向左侧滑动淡出-------------------*/
@-webkit-keyframes fadeOutLeft {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}

/*--------------向右侧淡出-------------------*/
@-webkit-keyframes fadeOutRight {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
}

/*--------------向上淡出-------------------*/
@-webkit-keyframes fadeOutUp {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
}

/*--------------放大旋转后恢复flip1-------------------*/
@-webkit-keyframes flip1 {
    0% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    40% {
        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    50% {
        -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    80% {
        -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
        transform: perspective(400px) scale3d(.95, .95, .95);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    100% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
}

/*--------------以X轴旋转出现flipInX-------------------*/
@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }

    100% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}

/*--------------以Y轴旋转出现-------------------*/
@-webkit-keyframes flipInY {
    0% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
    }

    60% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    }

    100% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}

/*--------------以X轴旋转淡出-------------------*/
@-webkit-keyframes flipOutX {
    0% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }

    30% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        opacity: 0;
    }
}

/*--------------以Y轴旋转淡出-------------------*/
@-webkit-keyframes flipOutY {
    0% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }

    30% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        opacity: 0;
    }
}

/*--------------从右侧倾斜淡入lightSpeedIn------------------*/
@-webkit-keyframes lightSpeedIn {
    0% {
        -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0;
    }

    60% {
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

/*--------------向右侧倾斜淡出 lightSpeedOut-------------------*/
@-webkit-keyframes lightSpeedOut {
    0% {
        opacity: 1;
    }

    100% {
        -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
        transform: translate3d(100%, 0, 0) skewX(30deg);
        opacity: 0;
    }
}

/*--------------顺时针旋转出现rotateIn-------------------*/
@-webkit-keyframes rotateIn {
    0% {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, -200deg);
        transform: rotate3d(0, 0, 1, -200deg);
        opacity: 0;
    }

    100% {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

/*--------------顺时针旋转-------------------*/
@-webkit-keyframes rotate {
    from {-webkit-transform:rotate(0deg);}
    to {-webkit-transform:rotate(360deg);}
}

/*--------------以左下角为原点顺时针旋转45度淡入rotateInDownLeft-------------------*/
@-webkit-keyframes rotateInDownLeft {
    0% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
    }

    100% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

/*--------------以右下角为原点逆时针旋转45度淡入rotateInDownRight-------------------*/
@-webkit-keyframes rotateInDownRight {
    0% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
    }

    100% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

/*--------------以左下角为原点向上逆时针旋转45度淡入rotateInUpLeft-------------------*/
@-webkit-keyframes rotateInUpLeft {
    0% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
    }

    100% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

/*--------------以右下角为原点向上顺时针旋转45度淡入rotateInUpRight-------------------*/
@-webkit-keyframes rotateInUpRight {
    0% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, -90deg);
        transform: rotate3d(0, 0, 1, -90deg);
        opacity: 0;
    }

    100% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

/*--------------顺时针旋转淡出------------------*/
@-webkit-keyframes rotateOut {
    0% {
        -webkit-transform-origin: center;
        transform-origin: center;
        opacity: 1;
    }

    100% {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, 200deg);
        transform: rotate3d(0, 0, 1, 200deg);
        opacity: 0;
    }
}

/*--------------顺时针旋转45度淡出-------------------*/
@-webkit-keyframes rotateOutDownLeft {
    0% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        opacity: 1;
    }

    100% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0;
    }
}

/*--------------逆时针旋转45度淡出-------------------*/
@-webkit-keyframes rotateOutDownRight {
    0% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        opacity: 1;
    }

    100% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0;
    }
}

/*--------------悬挂后掉下去hinge-------------------*/
@-webkit-keyframes hinge {
    0% {
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }

    20%, 60% {
        -webkit-transform: rotate3d(0, 0, 1, 80deg);
        transform: rotate3d(0, 0, 1, 80deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }

    40%, 80% {
        -webkit-transform: rotate3d(0, 0, 1, 60deg);
        transform: rotate3d(0, 0, 1, 60deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1;
    }

    100% {
        -webkit-transform: translate3d(0, 700px, 0);
        transform: translate3d(0, 700px, 0);
        opacity: 0;
    }
}

/*--------------从左侧顺时针旋转淡入rollIn-------------------*/
@-webkit-keyframes rollIn {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
        transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

/*--------------向右侧旋转淡出-------------------*/
@-webkit-keyframes rollOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
        transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    }
}

/*--------------从小到大淡入zoomIn------------------*/
@-webkit-keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1);
        transform: scale3d(.1, .1, .1);
    }

    100% {

        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        opacity: 1;

    }
}

/*--------------自上向下弹入zoomInDown-------------------*/
@-webkit-keyframes zoomInDown {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

/*--------------从左侧放大出现zoomInLeft-------------------*/
@-webkit-keyframes zoomInLeft {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

/*--------------从右侧放大出现zoomInRight-------------------*/
@-webkit-keyframes zoomInRight {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

/*--------------倾斜扭动skewX -------------------*/
@-webkit-keyframes skewX {
    0%{-webkit-transform:skew(4deg,4deg)}

    50%{-webkit-transform:skew(0deg,0deg)}

    100%{-webkit-transform:skew(-2deg,-2deg)}
}

/*自下向上放大出现zoomInUp*/
@-webkit-keyframes zoomInUp {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}
/*--------------由大到小淡入zoomOut-------------------*/
@-webkit-keyframes zoomOut {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(1.5, 1.5, 1.5);
        transform: scale3d(1.5, 1.5, 1.5);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

/*--------------缩小后向下滑出-------------------*/
@-webkit-keyframes zoomOutDown {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

/*--------------缩小后向左滑出-------------------*/
@-webkit-keyframes zoomOutLeft {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
        transform: scale(.1) translate3d(-2000px, 0, 0);
        -webkit-transform-origin: left center;
        transform-origin: left center;
    }
}

/*--------------缩小后向右滑出-------------------*/
@-webkit-keyframes zoomOutRight {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
        transform: scale(.1) translate3d(2000px, 0, 0);
        -webkit-transform-origin: right center;
        transform-origin: right center;
    }
}

/*--------------缩小后向上滑出-------------------*/
@-webkit-keyframes zoomOutUp {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

/*--------------自上向下滑入slideInDown-------------------*/
@-webkit-keyframes slideInDown {
    0% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
        visibility: visible;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

/*--------------从左侧滑入-------------------*/
@-webkit-keyframes slideInLeft {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        visibility: visible;
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

/*--------------从右侧滑入-------------------*/
@-webkit-keyframes slideInRight {
    0% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        visibility: visible;
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

/*--------------自上向下滑入-------------------*/
@-webkit-keyframes slideInUp {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
        visibility: visible;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

/*--------------向下滑动一定距离slideOutDown-------------------*/
@-webkit-keyframes slideOutDown {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        visibility: hidden;
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
}

/*向左侧滑动一定距离slideOutLeft*/
@-webkit-keyframes slideOutLeft {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        visibility: hidden;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}

@-webkit-keyframes pounda2 {
    from { -webkit-transform: none; opacity: 1}
    50% { -webkit-transform: scale(1.1); opacity: 1}
    to { -webkit-transform: none; opacity: 1}
}

@-webkit-keyframes yun1 {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
    }
}
@-webkit-keyframes yun2 {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(100px);
        transform: translateX(100px);
    }
}

/*-----------------------------------------------------自定义----------------------------------------------------------------*/
/*分割屏左右箭头动效*/
@keyframes arrowRight {
    0% { transform: translateX(0px); opacity: 0; }
    60% { transform: translateX(15px); opacity: 1; }
    100% { transform: translateX(30px); opacity: 0; }
}
@-webkit-keyframes arrowRight {
    0% { -webkit-transform: translateX(0px); opacity: 0; }
    60% { -webkit-transform: translateX(15px); opacity: 1; }
    100% { -webkit-transform: translateX(30px); opacity: 0; }
}
@keyframes arrowLeft {
    0% { transform: translateX(0px); opacity: 0; }
    60% { transform: translateX(-15px); opacity: 1; }
    100% { transform: translateX(-30px); opacity: 0; }
}
@-webkit-keyframes arrowLeft {
    0% { -webkit-transform: translateX(0px); opacity: 0; }
    60% { -webkit-transform: translateX(-15px); opacity: 1; }
    100% { -webkit-transform: translateX(-30px); opacity: 0; }
}
/*从左右上下进入（进入幅度小）*/
@-webkit-keyframes fadeFromLeft {
    0% { -webkit-transform: translate3d(-50px, 0, 0); opacity: 0; }
    100% { -webkit-transform: translate3d(0, 0, 0); opacity: 1; }
}
@-webkit-keyframes fadeFromRight {
    0% { -webkit-transform: translate3d(50px, 0, 0); opacity: 0; }
    100% { -webkit-transform: translate3d(0, 0, 0); opacity: 1; }
}
@-webkit-keyframes fadeFromTop {
    0% { -webkit-transform: translate3d(0, -50px, 0); opacity: 0; }
    100% { -webkit-transform: translate3d(0, 0, 0); opacity: 1; }
}
@-webkit-keyframes fadeFromBottom {
    0% { -webkit-transform: translate3d(0, 50px, 0); opacity: 0; }
    100% { -webkit-transform: translate3d(0, 0, 0); opacity: 1; }
}


/*下雪*/
@-webkit-keyframes snowing {
    0% { -webkit-transform: translate3d(0px,-200px, 0); opacity: 1; }
    100% { -webkit-transform: translate3d(50px, 100px, 0); opacity: 0; }
}


/*星星闪烁*/
@-webkit-keyframes star{
    0%{-webkit-filter: brightness(0.8);}
    100%{-webkit-filter: brightness(1.5);}
}

@-webkit-keyframes ripple {
    0% {
        box-shadow: 0 0 0 0 rgba(249,8,27, 0.25), 0 0 0 5px rgba(249,8,27, 0.25), 0 0 0 10px rgba(249,8,27, 0.25), 0 0 0 15px rgba(249,8,27, 0.25);
    }
    100% {
        box-shadow: 0 0 0 5px rgba(249,8,27, 0.25), 0 0 0 10px rgba(249,8,27, 0.25), 0 0 0 15px rgba(249,8,27, 0.25), 0 0 0 20px rgba(249,8,27, 0);
    }
}

/*花瓣掉落*/
@-webkit-keyframes down1{
    0% {top:-10%;left:0%;opacity: 1;}
    10%{left:20%;}
    20%{left:30%;}
    30%{left:40%;}
    40%{left:50%;}
    50%{left:60%;}
    60%{left:50%;}
    70%{left:40%;}
    80%{left:30%;}
    90%{left:20%;}
    100% {left:10%;top:100%;transform: rotate(360deg)}
}
@-webkit-keyframes down2{
    0% {top:-10%;left:80%;opacity: 1;}
    10%{left:70%;}
    20%{left:60%;}
    30%{left:50%;}
    40%{left:40%;}
    50%{left:30%;}
    60%{left:20%;}
    70%{left:10%;}
    80%{left:20%;}
    90%{left:30%;}
    100% {left:40%;top:100%;transform: rotate(360deg)}
}
@-webkit-keyframes down3{
    0% {top:-10%;left:60%;opacity: 1;}
    10%{left:70%;}
    20%{left:80%;}
    30%{left:90%;}
    40%{left:100%;}
    50%{left:80%;}
    60%{left:70%;}
    70%{left:80%;}
    80%{left:90%;}
    90%{left:100%;}
    100% {left:80%;top:100%;transform: rotate(360deg)}
}
@-webkit-keyframes down4{
    0% {top:-10%;left:20%;opacity: 1;}
    10%{left:10%;}
    20%{left:5%;}
    30%{left:10%;}
    40%{left:20%;}
    50%{left:30%;}
    60%{left:40%;}
    70%{left:50%;}
    80%{left:60%;}
    90%{left:50%;}
    100% {left:40%;top:100%;transform: rotate(360deg)}
}
@-webkit-keyframes down5{
    0% {top:-10%;left:90%;opacity: 1;}
    10%{left:80%;}
    20%{left:70%;}
    30%{left:60%;}
    40%{left:50%;}
    50%{left:40%;}
    60%{left:30%;}
    70%{left:20%;}
    80%{left:30%;}
    90%{left:40%;}
    100% {left:50%;top:100%;transform: rotate(360deg)}
}

@-webkit-keyframes down7{
    0% {top:-10%;left:40%;opacity: 1;}
    10%{left:70%;}
    20%{left:80%;}
    30%{left:90%;}
    40%{left:100%;}
    50%{left:80%;}
    60%{left:70%;}
    70%{left:80%;}
    80%{left:90%;}
    90%{left:100%;}
    100% {left:80%;top:100%;transform: rotate(360deg)}
}
@-webkit-keyframes down8{
    0% {top:-10%;left:55%;opacity: 1;}
    10%{left:70%;}
    20%{left:80%;}
    30%{left:90%;}
    40%{left:100%;}
    50%{left:80%;}
    60%{left:70%;}
    70%{left:80%;}
    80%{left:90%;}
    90%{left:100%;}
    100% {left:80%;top:100%;transform: rotate(360deg)}
}
/*星星掉落*/
@-webkit-keyframes starMove {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 0;
    }
    10%,90%{
        opacity: 1;
    }

    100% {
        -webkit-transform: translate3d(-500px,700px, 0);
        transform: translate3d(-500px,700px, 0);
        opacity: 0;
    }
}

@-webkit-keyframes niao1 {
    0% {
        -webkit-transform: translateX(40%);
        transform: translateX(40%);
    }

    100% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
}

@-webkit-keyframes niao2 {
    0% {
        -webkit-transform: translate(-30%,0%);
        transform: translate(-30%,0%);
    }

    100% {
        visibility: hidden;
        -webkit-transform: translate(100%,0%);
        transform: translate(100%,0%);
    }
}


@-webkit-keyframes niao3 {
    0% {
        -webkit-transform: translate(0,0);
        transform: translate(0,0);
    }

    100% {
        visibility: hidden;
        -webkit-transform: translate(800%,-300%);
        transform: translate(800%,-300%);
    }
}
@-webkit-keyframes niao4 {
    0% {
        -webkit-transform: translate(0,0);
        transform: translate(0,0);
    }

    100% {
        visibility: hidden;
        -webkit-transform: translate(400%,200%);
        transform: translate(400%,200%);
    }
}
/*花瓣*/
@-webkit-keyframes ff {
    0% {
        opacity: 0;
        -webkit-transform: translate(0rem, 0rem)  rotate(0deg);
        transform: translate(0rem, 0rem)  rotate(0deg);
    }
    25%,75% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform: translate(0rem, 6rem) rotate(360deg);
        transform: translate(0rem, 6rem) rotate(360deg);
    }
}

@-webkit-keyframes fly1 {
    0%{
        opacity: 0;
        -webkit-transform: translate(200px, 0px);
        transform: translate(200px, 0px);
    }
    25%,75% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform: translate(-500px, 0px);
        transform: translate(-500px, 0px);
    }
}
@-webkit-keyframes fly2 {
    0%{
        opacity: 0;
        -webkit-transform: translate(200px, 200px);
        transform: translate(200px, 200px);
    }
    25%,75% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform: translate(-200px, -500px);
        transform: translate(-200px, -500px);
    }
}
@-webkit-keyframes rain {
    0%{
        opacity: 0;
        -webkit-transform: translate(0px, -1000px);
        transform: translate(0px, -1000px);
    }
    10%{
        opacity: 1;
    }
    100% {
        -webkit-transform: translate(0px, 1000px);
        transform: translate(0px, 1000px);
    }
}


@-webkit-keyframes zhi {
    0% {
        -webkit-transform: translate(-100%,50%);
        transform: translate(-100%,50%);
    }

    100% {
        visibility: hidden;
        -webkit-transform: translate(100%,-40%);
        transform: translate(100%,-40%);
    }
}



@-webkit-keyframes fly3 {
    0%{
        opacity: 0;
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }
    10%{
        opacity: 1;
    }
    100% {
        -webkit-transform: translate(80px, -100px);
        transform: translate(80px, -100px);
    }
}

@-webkit-keyframes tree1 {
    0% {
        -webkit-transform-origin:0% 50%;
        -webkit-transform:rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform-origin:0% 50%;
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg);
    }
}
@-webkit-keyframes tree2 {
    0% {
        -webkit-transform-origin:100% 0%;
        -webkit-transform:rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform-origin:100% 0%;
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }
}


@-webkit-keyframes bgAni {
    0%{
        -webkit-transform: scale(1.2,1.2);
    }
    100% {
        -webkit-transform: scale(1,1);
    }
}



@-webkit-keyframes qiqiuMove {
    0% { -webkit-transform: translate3d(0, 0, 0); opacity: 1; }
    100% { -webkit-transform: translate3d(0, -50px, 0); opacity: 1; }
}


@-webkit-keyframes boatMove {
    0% { -webkit-transform: translate3d(0, 0, 0); opacity: 1; }
    100% { -webkit-transform: translate3d(-100px,0 , 0); opacity: 1; }
}
@keyframes boatMove {
    0% { -webkit-transform: translate3d(0, 0, 0); opacity: 1; }
    100% { -webkit-transform: translate3d(-100px,0 , 0); opacity: 1; }
}



@-webkit-keyframes yunMove {
    0% { -webkit-transform: translate3d(0, 0, 0); opacity: 1; }
    100% { -webkit-transform: translate3d(30px,0 , 0); opacity: 1; }
}
@keyframes yunMove {
    0% { -webkit-transform: translate3d(0, 0, 0); opacity: 1; }
    100% { -webkit-transform: translate3d(30px,0 , 0); opacity: 1; }
}


@-webkit-keyframes yunMove1 {
    0% { -webkit-transform: translate3d(0, 0, 0); opacity: 1; }
    100% { -webkit-transform: translate3d(-30px,0 , 0); opacity: 1; }
}
@keyframes yunMove1 {
    0% { -webkit-transform: translate3d(0, 0, 0); opacity: 1; }
    100% { -webkit-transform: translate3d(-30px,0 , 0); opacity: 1; }
}



/*--------------放大并左右倾斜摇晃tada------------------*/
@-webkit-keyframes tada1 {
    /* 0% {
         -webkit-transform: scale3d(1.1, 1.1, 1.1);
     }*/

    /*10%, 20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -4deg);
    }
*/
    10%,30%, 50%, 70%, 90% {
        -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 5deg);
    }

    20%,40%, 60%, 80% ,100%{
        -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -5deg);
    }

    /*100% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
    }*/
}
@keyframes tada1 {
    /* 0% {
         -webkit-transform: scale3d(1.1 1.1, 1.1);
     }*/

    /* 10%, 20% {
         -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -4deg);
     }*/

    10%,30%, 50%, 70%, 90% {
        -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 5deg);
    }

    20%,40%, 60%, 80% ,100%{
        -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -5deg);
    }

    /*100% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
    }*/
}

@-webkit-keyframes biger3 {
    0%,
    100% {
        -webkit-transform: scale(1, 1);
        -webkit-filter: brightness(1);
    }
    40%,
    90% {
        -webkit-filter: brightness(1);
    }
    50% {
        -webkit-transform: scale(1.1, 1.1);
        -webkit-filter: brightness(1.3);
    }
}

.el-message-box{
    z-index: 99999 !important;
    max-width: 99vw !important;
}